<template>
  <div class="app-container">
    <el-form
      inline
      label-width="80px"
      @submit.native.prevent
    >
      <el-form-item :label="$t('deviceCore')">
        <el-input v-model="deviceCore" />
      </el-form-item>
      <el-form-item :label="$t('time')">
        <el-select v-model="timeBlank" @change="timeChange">
          <el-option
            v-for="item in times"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('type')">
        <el-select v-model="type">
          <el-option :label="$t('all')" value="" />
          <el-option :label="$t('upload')" value="deviceUpload" />
          <el-option :label="$t('status')" value="deviceStatus" />
          <el-option :label="$t('send')" value="serverSend" />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('startDate')">
        <el-date-picker
          v-model="startDate"
          type="datetime"
          :placeholder="$t('startDate')"
          align="right"
          :picker-options="pickerOptions1"
          value-format="timestamp"
        />
      </el-form-item>
      <el-form-item :label="$t('endDate')">
        <el-date-picker
          v-model="endDate"
          type="datetime"
          :placeholder="$t('endDate')"
          align="right"
          :picker-options="pickerOptions1"
          value-format="timestamp"
        />
      </el-form-item>
      <el-form-item :label="$t('limit')">
        <el-input v-model="limitNumber" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">{{ $t('search') }}</el-button>
        <el-button type="primary">{{ $t('clean') }}</el-button>
      </el-form-item>
    </el-form>

    <div
      class="uni-scroll"
      style="height: calc(100vh - 180px)"
    >
      <div
        v-for="(item ,index) in list"
        :key="index"
        style="padding: 5px"
      >
        <el-alert
          :title="formatDate(item.timestamp)"
          type="info"
          :close-text="$t(item.type)"
        />
        <el-input v-model="item.raw" type="textarea" :rows="3" />
      </div>
    </div>

  </div>
</template>

<script>
import {
  formatDate,
  failureNotice
} from '@/util/common'
import { listMessageRaw } from '@/api/iot/iotMessageRawApi'
import { detailsDevice } from '@/api/iot/iotDeviceApi'

export default {
  name: 'IotHistory',
  data() {
    return {
      type: '',
      list: [],
      deviceCore: null,
      device: {},
      timeBlank: 15 * 60 * 1000,
      startDate: new Date().getTime() - 15 * 60 * 1000,
      endDate: new Date().getTime() + 15 * 60 * 1000,
      times: [
        {
          value: 15 * 60 * 1000,
          label: '15' + this.$t('minutes')
        },
        {
          value: 30 * 60 * 1000,
          label: '30' + this.$t('minutes')
        },
        {
          value: 45 * 60 * 1000,
          label: '45' + this.$t('minutes')
        },
        {
          value: 60 * 60 * 1000,
          label: '1' + this.$t('hour')
        },
        {
          value: 4 * 60 * 60 * 1000,
          label: '4' + this.$t('hour')
        },
        {
          value: 24 * 60 * 60 * 1000,
          label: '24' + this.$t('hour')
        },
        {
          value: 7 * 24 * 60 * 60 * 1000,
          label: '7' + this.$t('day')
        },
        {
          value: 0,
          label: '自定义'
        }
      ],
      pickerOptions1: {
        shortcuts: [
          {
            text: this.$t('today'),
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: this.$t('today'),
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: this.$t('a') + this.$t('week') + this.$t('ago'),
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      limitNumber: 200
    }
  },
  created() {
    const param = this.$route.query
    if (param.deviceCore) {
      this.deviceCore = param.deviceCore
      this.search()
    }
    if (param.deviceName) {
      this.deviceName = param.deviceName
      this.setTagsViewTitle()
    }
  },
  methods: {
    setTagsViewTitle() {
      this.tempRoute = Object.assign({}, this.$route)
      const route = Object.assign({}, this.tempRoute, {
        title: `${this.deviceName}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    formatDate(date) {
      return formatDate(this, date)
    },
    timeChange() {
      const timeBlank = this.timeBlank
      if (timeBlank !== 0) {
        const endDate = new Date().getTime() + 15 * 60 * 1000
        const startDate = endDate - timeBlank
        this.startDate = startDate
        this.endDate = endDate
      }
    },
    search() {
      if (this.deviceCore == null || this.deviceCore === '') {
        failureNotice(this, this.$t('deviceCore'))
        return
      }
      detailsDevice({
        deviceCore: this.deviceCore
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.device = data
          this.listMessageRaw()
        }
      })
    },
    listMessageRaw() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.list = []
      listMessageRaw({
        deviceId: this.device.deviceId,
        startDate: parseInt(this.startDate / 1000),
        endDate: parseInt(this.endDate / 1000),
        type: this.type,
        limitNumber:this.limitNumber
      }).then(res => {
        const { data, code } = res
        if (code === '200') {
          this.list = data
        } else {
          this.list = []
          failureNotice(this)
        }
        loading.close()
      })
    }
  }
}
</script>
<style scoped></style>
